<template>
  <div class="chatRecord">
    <c-title :hide="false" text="聊天记录"></c-title>
    <div class="date">
      <div style="width: 5rem; height: 2px; background-color: #e9e9e9; display: inline-block;"></div>
      <div style="padding: 0 10px;">{{ date_str }}</div>
      <div style="width: 5rem; height: 2px; background-color: #e9e9e9; display: inline-block;"></div>
    </div>
    <div class="chat-list">
      <div v-for="(item, index) in chats_list" :key="index">
        <!-- 图片消息 -->
        <div v-if="item.content_type == 1" class="chat-list-item">
          <div class="avatar">
            <img
              :src="item.direction_type ? item.has_one_user.avatar_image : item.has_one_employee ? item.has_one_employee.avatar : ''"
              alt=""
              style="width: 2rem; height: 2rem; border-radius: 100%;"
            />
          </div>
          <div class="detail">
            <div class="member-info">
              <span>{{ item.direction_type ? item.has_one_user.nickname : item.has_one_employee.nickname }}</span>
              <span style="margin-left: 0.5rem; font-size: 12px; color: #999;">{{ item.created_at }}</span>
            </div>
            <div class="chat-content">
              <img :src="item.content" alt="" style="width: 100px; height: 100px;" />
            </div>
            <div class="line"></div>
          </div>
        </div>
        <!-- 商品信息消息 -->
        <div v-else-if="item.content_type == 2" class="chat-list-item">
          <div class="avatar">
            <img
              :src="item.direction_type ? item.has_one_user.avatar_image : item.has_one_employee ? item.has_one_employee.avatar : ''"
              alt=""
              style="width: 2rem; height: 2rem; border-radius: 100%;"
            />
          </div>
          <div class="detail">
            <div class="member-info">
              <span>{{ item.direction_type ? item.has_one_user.nickname : item.has_one_employee.nickname }}</span>
              <span style="margin-left: 0.5rem; font-size: 12px; color: #999;">{{ item.created_at }}</span>
            </div>
            <div class="chat-content">
              <ChatContentGoods :item="item" />
            </div>
            <div class="line"></div>
          </div>
        </div>
        <!-- 订单信息 -->
        <div v-else-if="item.content_type == 3" class="chat-list-item">
          <div class="avatar">
            <img
              :src="item.direction_type ? item.has_one_user.avatar_image : item.has_one_employee ? item.has_one_employee.avatar : ''"
              alt=""
              style="width: 2rem; height: 2rem; border-radius: 100%;"
            />
          </div>
          <div class="detail">
            <div class="member-info">
              <span>{{ item.direction_type ? item.has_one_user.nickname : item.has_one_employee.nickname }}</span>
              <span style="margin-left: 0.5rem; font-size: 12px; color: #999;">{{ item.created_at }}</span>
            </div>
            <div class="chat-content">
              <ChatContentOrder :item="item" />
            </div>
            <div class="line"></div>
          </div>
        </div>
        <!-- 聊天记录信息 -->
        <div v-else-if="item.content_type == 7" class="chat-list-item">
          <div class="avatar">
            <img
              :src="item.direction_type ? item.has_one_user.avatar_image : item.has_one_employee ? item.has_one_employee.avatar : ''"
              alt=""
              style="width: 2rem; height: 2rem; border-radius: 100%;"
            />
          </div>
          <div class="detail">
            <div class="member-info">
              <span>{{ item.direction_type ? item.has_one_user.nickname : item.has_one_employee.nickname }}</span>
              <span style="margin-left: 0.5rem; font-size: 12px; color: #999;">{{ item.created_at }}</span>
            </div>
            <div class="chat-content">
                  <p class="txt">
                    <ChatContentRecord :item="item" :emojiObjs="emojiObjs" @changeId="changeId" />
                  </p>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <!-- 文本消息 -->
        <div v-else class="chat-list-item">
          <div class="avatar">
            <img
              :src="item.direction_type ? item.has_one_user.avatar_image : item.has_one_employee ? item.has_one_employee.avatar : ''"
              alt=""
              style="width: 2rem; height: 2rem; border-radius: 100%;"
            />
          </div>
          <div class="detail">
            <div class="member-info">
              <span>{{ item.direction_type ? item.has_one_user.nickname : item.has_one_employee.nickname }}</span>
              <span style="margin-left: 0.5rem; font-size: 12px; color: #999;">{{ item.created_at }}</span>
            </div>
            <div class="chat-content">
              <ChatContentTxt :item="item" />
            </div>
            <div class="line"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ChatContentTxt, ChatContentPic, ChatContentGoods, ChatContentOrder,ChatContentRecord } from "./index";
export default {
  data() {
    return {
      history_queue_id: null,
      date_str: "",
      chats_list: [],
      topTitle: "",
      emojiObjs: {}
    };
  },

  methods: {
    getChatInfo(history_queue_id) {
      $http
        .get("plugin.yun-chat.frontend.chat.get-history-chat-list", {
          history_queue_id
        })
        .then(response => {
          if (response.result === 1) {
            this.date_str = response.data.date_str;
            this.chats_list = response.data.chats_list;
            this.topTitle = response.data.title;
            this.chats_list = this.fmtChatList(this.chats_list);
            console.log(this.chats_list);
          } else {
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    fmtChatList(chatList) {
      // 处理商品或表情消息
      if (chatList instanceof Array) {
        for (let i = 0; i < chatList.length; i++) {
          if (chatList[i]["content_type"] == 2 || chatList[i]["content_type"] == 3) {
            chatList[i]["content"] = JSON.parse(decodeURIComponent(chatList[i]["content"]));
          } else if (chatList[i]["content_type"] == 0) {
            chatList[i]["content"] = this.replaceEmoji(chatList[i]["content"]);
          }
        }
      } else if (chatList instanceof Object) {
        if (chatList["content_type"] == 2 || chatList["content_type"] == 3) {
          chatList["content"] = JSON.parse(decodeURIComponent(chatList["content"]));
        } else if (chatList["content_type"] == 0) {
          chatList["content"] = this.replaceEmoji(chatList["content"]);
        }
      }

      return chatList;
    },
    replaceEmoji(content) {
      let that = this;
      return content.replace(/face\[([^\s\[\]]+?)\]/g, function (i) {
        return '<img src="' + require("../../../../assets/images/" + that.emojiObjs[i]["url"]) + '" style="width:30px;height:30px;"/>';
      });
    },
    onChangeFloat() {},
    changeId(history_queue_id){
      this.getChatInfo(history_queue_id);
    }
  },
  created() {
    this.history_queue_id = this.$route.params.history_queue_id;
    this.emojiObjs = this.$route.params.emojiObjs;
    if(this.history_queue_id){
      this.getChatInfo(this.history_queue_id);
    }else{
      this.$router.go(-1);
    }

  },
  components: {
    ChatContentTxt,
    ChatContentPic,
    ChatContentGoods,
    ChatContentOrder,
    ChatContentRecord
  },
  // watch:{
  //   "$route.params.history_queue_id": {
  //     immediate: true, // 第一次的数据，也要当做是一种变化
  //     deep:true,
  //     handler(new_value, old_value) {
  //     },

  //   },
  // }
};
</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.date {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.65rem;
  color: #999;
  justify-content: center;
}

.chat-list {
  // height: 100vh;
  // overflow-y: scroll;
  .chat-list-item {
    display: flex;
    padding: 0 1rem;
    margin-top: 2rem;

    .detail {
      width: 100%;
      text-align: left;
      position: relative;
      margin-left: 0.7rem;

      .line {
        height: 1px;
        width: 100%;
        background-color: #ebeef5;
        position: absolute;
        bottom: -1rem;
      }

      .chat-content {
        margin-top: 1.5rem;

        .txt {
          background: #ebedf3;
          border-radius: 3px;
          text-align: justify;
          padding: 10px;
          max-width: 640px;
        }
      }
    }
  }
}
</style>